<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>翰之博技术支持 数据大屏</title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
</head>
<body>
	<header>
		翰之博技术支持 数据统计
		<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
	</header>
	<div id="content">
		{{datas.count.all}}
	</div>

	<script type="text/javascript" src="js/jquery.min.js"></script>		
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript">

		var vm = new Vue({
			el: '#content',
			data: {
				datas:{
					count:{all:0,doing:5,waiting:0,working:99},
					order:[]
				},
				timer: null
			},
			methods: {
				
				setTimer: function () {
					var that=this;
					console.log('开始定时...111')
					if(this.timer == null) {
						this.timer = setInterval( () => {
							console.log('开始定时...每过3秒执行一次')
							$.ajax({
								type: 'POST',
								url: "data.php",
								data:{time:Date.parse(new Date())},
								dataType: 'JSON',
								success: function (result) {
									console.log(result);
									if (result.errno == 0) {
										vm.datas=result.data;
										
									}
								}
							})
						}, 3000)
					}
				}
			},
			created: function() {
				console.log('开始定时...000')
				            //this.getFamilyBase_info()
				            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
				            clearInterval(this.timer)
				            this.timer = null
				            this.setTimer()
				        },
				        destroyed: function () {
				            // 每次离开当前界面时，清除定时器
				            clearInterval(this.timer)
				            this.timer = null
				        }

				    })

				</script>

			</body>
			</html>
